<template>
  <div class="TokenTrendContent">
    <!-- <div class="tokenTlt">通证数据总览</div> -->
    <img class="tokenTlt" src="../../assets/img/zhuzizichan.png" alt="">
    <div id="tokencont" class="tokencont"></div>
  </div>
</template>

<script>
import { getScreenToken } from '@/api/user'
// import { rsaDecrypt } from '@/utils/commonutils3'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent, MarkPointComponent } from 'echarts/components'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  GridComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])
export default {
  name: 'TokenTrend',
  data() {
    return {
      tokenList: [],
      tokenDate: [],
      src: this.$tokenName === '数字资产' ? '../../assets/img/zhuzizichan.png' : '../../assets/img/tokentltImg.png'
    }
  },
  created() {
    this.getTokenData()
  },
  mounted() {

  },
  methods: {
    async getTokenData() {
      const res = await getScreenToken()
      if (res.code === 200) {
        const data = res.data.ScreenTokenList.reverse()
        data.forEach(item => {
          this.tokenList.push(item.nowToken)
          this.tokenDate.push(item.day)
        })
        // console.log(this.tokenList, 'this.tokenList')
        // console.log(this.tokenDate, 'this.tokenDate')
        this.initchart(this.tokenDate, this.tokenList)
      }
    },
    initchart(xdata, ydata) {
      // const ydata = []
      let max = Math.max(...ydata);
      max = max + 0.01;
      const option = {
        grid: {
          // 设置图表四周留白间距
          top: '13%',
          right: '3%',
          bottom: '16%',
          left: '8%'
        },
        yAxis: {
          type: 'value',
          max: max,
          axisLabel: {
            formatter: '{value}', // 设置单位为元
            textStyle: {
              color: 'rgba(189, 209, 255, 0.6)'
            }
          },
          // max: 0.1, //最大刻度值
          // interval: 2, //刻度值间隔值
          name: '',
          boundaryGap: true,
          nameTextStyle: {
            color: 'rgba(189, 209, 255, 0.9)',
            align: 'right',
            verticalAlign: 'bottom',
            fontSize: 14
          },
          splitLine: {
            // 网格线
            show: true, // 关闭网格线
            // 或者
            lineStyle: {
              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0190FF',
              width: 2,
              type: 'solid'
            }
          }
        },
        xAxis: {
          data: xdata,
          show: true,
          type: 'category',
          boundaryGap: false, // 设置x轴两边的留白
          axisTick: {
            // x轴刻度尺
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(189, 209, 255, 0.9)',
              fontSize: '12'
            },
            margin: 15
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3C6579',
              width: 1,
              type: 'solid'
            }
          },
          // x轴线条颜色
          lineStyle: {
            color: '#eee',
            type: 'dashed',
            width: 1
          }

        },
        series: [
          {
            data: ydata,
            label: {
              show: false,
              position: 'top',
              distance: 20,
              // left: 'left',
              textStyle: {
                color: '#fff'
              }
            },
            type: 'line',
            smooth: true,
            color: '#43F8FF',
            lineStyle: {
              width: 3, // 外边线宽度
              color: '#00FFFF' // 外边线颜色
            },
            showSymbol: false, // 去除面积图节点圆
            areaStyle: {
              // 区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#01EAFF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,210,255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      var chartDom = document.getElementById('tokencont')
      var myChart = echarts.init(chartDom)
      option && myChart.setOption(option)
    },
    async getScreenToken() {
      //
      const res = await getScreenToken()
      if (res.code === 200) {
        // const list = rsaDecrypt(res.data.data).ScreenTokenList.reverse()
        const list = res.data.ScreenTokenList.reverse()
        const data1 = []
        const xdata = []
        console.log(list)
        list.forEach(item => {
          data1.push(item.pastToken)
          xdata.push(item.day)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss"
>
.TokenTrendContent {

  // padding: .1563rem;
  .tokenTlt {
    width: 2.4948rem;
    height: .3125rem;
  }

  .tokencont {
    height: 1.5625rem;
    width: 2.5573rem;
  }
}
</style>
